<!DOCTYPE html>
<html lang="en">

<head>
  <title>精灵旅社</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <a href="#" class="logo">HouEr</a>
    <ul>
      <li><a href="#" class="active">概要</a></li>
      <li><a href="./人物介绍.html">人物介绍</a></li>
      <li><a href="./幕后花絮.html">幕后花絮</a></li>
      <li><a href="./last.html">台词</a></li>
    </ul>
  </header>
  <section>
    <img src="images/stars.png" id="stars">
    <img src="images/moon.png" id="moon">
    <img src="images/mountains_behind.png" id="mountains_behind">
    <h2 id="text">Hotel Transylvania</h2>
    <a href="#sec" id="btn">开始</a>
    <img src="images/mountains_front.png" id="mountains_front">
  </section>
  <div class="sec" id="sec">
    <h2>Hotel Transylvania（精灵旅社）</h2>
    <h4>基本信息</h4>
    <p>
      《精灵旅社》是美国由丹·哈格曼等担任编剧，格恩迪·塔塔科夫斯基执导，
      亚当·桑德勒、赛琳娜·戈麦斯、史蒂夫·布西密、安迪·萨姆伯格等人配音的喜剧动画，
      于2012年9月8日在加拿大首映，于2013年9月8日在加拿大上映。
      该片讲述了吸血鬼之王德库拉伯爵为保护女儿Mavis，建立怪物酒店仅供怪物入住。
      女儿118岁生日宴时，人类乔纳森误入酒店。德库拉试图驱逐他，但乔纳森与Mavis一见钟情。
      为赢得岳父喜爱，乔纳森开始求爱大作战。
      该片截至2024年6月11日，全球共计收获约3.58亿美元票房，
      2013年，该片提名第70届美国电影电视金球奖“最佳动画片”
    </p>
    <h4>剧情介绍</h4>
    <p>
      《精灵旅社》讲述了在特兰西瓦尼亚异常偏远的一片地界里，坐落着一家“精灵旅社”，
      是由吸血鬼德古拉（亚当·桑德勒 配音）斥巨资专门打造的，
      为全世界的怪物以及他们的家人提供了一个可以纵情欢乐的场所，
      暂时远离人类社会的限制，“科学怪人”弗兰肯·斯坦（凯文·詹姆斯 配音）和他的新娘、
      木乃伊（席洛·格林 配音）以及隐形人（大卫·斯佩德 配音），还有狼人一家，
      他们都在这里寻求到了安全的庇护和平静。
      <br>
      德古拉可不仅仅是那个众所周知的“黑暗王子”，
      他同时也是一位父亲。德古拉对他的女儿梅维丝（赛琳娜·戈麦斯 配音）进行各种保护，
      唯恐她受到一丁点的伤害。他甚至还编造了很多故事，
      大多都是为了描述外面的世界有多么地可怕和危险的，
      想以此来打消女儿时不时出现的冒险精神。
      但是，当一个普通的人类不小心闯进了旅社，
      而且还喜欢上了梅维丝之后，德古拉意识到让他最头疼的问题终于还是不可避免的降临了
    </p>
  </div>
  <h4 class="on">剧照海报</h4>
  <div class="shell">
    <ul class="images">
      <li class="img"></li>
      <li class="img"></li>
      <li class="img"></li>
    </ul>
    <ul class="min-images">
      <li class="min"></li>
      <li class="min"></li>
      <li class="min"></li>
    </ul>
    <div class="button">
      <div class="button-left"><</div>
        <div class="button-right">></div>
      </div>
    </div>
    <div class="footer">
    </div>

    <script>
      let stars = document.getElementById('stars')
      let moon = document.getElementById('moon')
      let mountains_behind = document.getElementById('mountains_behind')
      let text = document.getElementById('text')
      let btn = document.getElementById('btn')
      let mountains_front = document.getElementById('mountains_front')
      let header = document.querySelector('header')

      window.addEventListener('scroll', function () {
        let value = window.scrollY;
        stars.style.left = value * 0.25 + 'px'
        moon.style.top = value * 1.05 + 'px'
        mountains_behind.style.top = value * 0.5 + 'px'
        mountains_front.style.top = value * 0 + 'px'
        text.style.marginRight = value * 4 + 'px'
        text.style.marginTop = value * 1.5 + 'px'
        btn.style.marginTop = value * 1.5 + 'px'
        header.style.top = value * 0.5 + 'px'
      })
      let left = document.querySelector('.button-left')
      let right = document.querySelector('.button-right')
      let min = document.querySelectorAll('.min')
      let images = document.querySelector('.images')

      let index = 0
      let time

      function position() {
        images.style.left = (index * -100) + "%"
      }
      function add() {
        if (index >= min.length - 1) {
          index = 0
        } else {
          index++
        }
      }
      function desc() {
        if (index < 1) {
          index = min.length - 1
        } else {
          index--
        }
      }
      function timer() {
        time = setInterval(() => {
          index++
          desc()
          add()
          position()
        }, 3000)
      }
      left.addEventListener('click', () => {
        desc()
        position()
        clearInterval(time)
        timer()
      })
      right.addEventListener('click', () => {
        add()
        position()
        clearInterval(time)
        timer()
      })
      for (let i = 0; i < min.length; i++) {
        min[i].addEventListener('click', () => {
          index = i
          position()
          clearInterval(time)
          timer()
        })
      }
      timer()
    </script>
</body>

</html>